<template>
  <!-- 个人信息主页 -->
  <div id="HomePage">
    <div class="basicInfo">
      <p>基本信息</p>
      <p class="time">村龄: {{ getYear }} ({{ getCreatedTime }})</p>
      <p class="gender">性别: {{ getGender }}</p>
      <p class="age">年龄: {{ getAge }}</p>
      <van-divider />
      <div class="lookWhole"
           @click="handleLookWhole">
        <span>查看全部</span>
      </div>
    </div>

    <div class="musicTaste">
      <van-cell-group :border="false">
        <template #title>
          <p>音乐品味</p>
        </template>
        <van-cell :border="false"
                  size="large"
                  title="听歌排行">
          <template #label>
            <span>累计听歌{{ userData.listenSongs }}首</span>
          </template>
        </van-cell>
        <van-cell :border="false"
                  size="large"
                  title="我喜欢的音乐">
          <template #label>
            <span>{{ lickMusicIds.length }}首</span>
          </template>
        </van-cell>
      </van-cell-group>
    </div>

    <div class="createdMusic">
      <van-cell-group :border="false">
        <template #title>
          <p>创建的歌单</p>
        </template>
        <van-cell v-for="(item, index) in userPlaylist"
                  :key="index"
                  :border="false"
                  :title="item.name"
                  :label="item.trackCount + '首'"
                  @click="handleOpenMusic(item)">
          <template #icon>
            <van-image width="50"
                       height="50"
                       :src="item.coverImgUrl" />
          </template>
        </van-cell>
      </van-cell-group>
    </div>
  </div>
</template>

<script>
import { formatDate } from '../../../../currency'
import {
  getLikeMusic,
  getUserPlaylist,
  getMsgComments,
  getUserSubcount,
} from '@/api/userInfo'
export default {
  name: 'HomePage',
  props: {
    userProfile: Object,
    userData: Object,
  },
  data() {
    return {
      lickMusicIds: [],
      userPlaylist: [],
      userId: '',
    }
  },
  computed: {
    // 获取注册时间
    getCreatedTime() {
      let time =
        formatDate(this.userProfile.createTime).slice(0, 7).replace('-', '年') +
        '月注册'
      return time
    },
    // 获取注册时间距今年份
    getYear() {
      let date = new Date()
      let year =
        Number(date.getFullYear()) -
        Number(formatDate(this.userProfile.createTime).slice(0, 4)) +
        '年'
      return year
    },
    // 获取性别
    getGender() {
      if (this.userProfile.gender === 0) {
        return '保密'
      } else if (this.userProfile.gender === 1) {
        return '男'
      } else {
        return '女'
      }
    },
    // 获取年龄
    getAge() {
      let ageTime = ''
      let age = formatDate(this.userProfile.birthday)
      Number(age[3]) >= 5
        ? (ageTime = age[2] + '5后')
        : (ageTime = age[2] + '0后')
      return ageTime
    },
  },
  methods: {
    // 查看全部
    handleLookWhole() {},
    // 打开歌单
    handleOpenMusic(row) {
      this.$router.push({
        path: `/songSheet`,
        query: {
          id: row.id,
          userId: row.userId,
        },
      })
    },
    getUserInfo() {
      let cookie = ''
      if (this.$store.state.userInfo.cookie) {
        cookie = this.$store.state.userInfo.cookie
      }
      // 获取喜欢的音乐的id
      getLikeMusic(this.userId, cookie).then((res) => {
        this.lickMusicIds = res.ids
      })
      // 获取用户歌单
      getUserPlaylist(this.userId, cookie).then((res) => {
        this.userPlaylist = res.playlist
          .slice(1, res.playlist.length)
          .slice(0, 10)
      })
    },
  },
}
</script>

<style scoped>
#HomePage {
  width: 100%;
  height: 100%;
  background: #f5f5f5;
  padding: 10px 0;
}
.basicInfo,
.musicTaste,
.createdMusic {
  width: 85%;
  padding: 10px 15px;
  margin: 10px auto;
  background: #fff;
  border-radius: 10px;
  /* margin-bottom: 10px; */
}
.basicInfo p:nth-child(1),
.musicTaste p:nth-child(1),
.createdMusic p:nth-child(1) {
  margin: 0;
  font-weight: bold;
  font-size: 16px;
}
.time,
.gender,
.age {
  padding-top: 8px;
  font-size: 14px;
}
.lookWhole {
  text-align: center;
  font-size: 12px;
}
.van-cell-group__title {
  padding: 16px 0 8px;
  color: #000;
}
.musicTaste .van-cell,
.createdMusic .van-cell {
  padding: 5px 0;
}
.musicTaste .van-cell--large .van-cell__title,
.createdMusic .van-cell--large .van-cell__title {
  font-size: 14px;
}
.musicTaste .van-cell--large .van-cell__label,
.createdMusic .van-cell--large .van-cell__label {
  font-size: 12px;
  margin: 0;
}
.createdMusic /deep/ .van-image__img {
  border-radius: 4px;
}
.createdMusic .van-image {
  padding-right: 10px;
}
</style>